<template>
    <div class="box-right-top panel">
        <title-box title="电站状态">
            <div class="x-content-inner">
                <pie-chart :colors="colors" :list="list" />
            </div>
        </title-box>
    </div>
</template>
<script setup name="StationStatusComponent">
import { ref } from 'vue'

import TitleBox from './../TitleBox/index.vue'
import PieChart from './../PieChart/index.vue'
import { queryStatus } from '/@/api/Iframe/Home/index.js'
import { SUCCESS_CODE } from '@iframe/tools/axios/axios.js'

const colors = ['#5982FF', '#35C6BE', '#FFC713', '#f74d4d', '#5982FF', '#b9b9b9']
const list = ref([])

const status = {
    0: '正常',
    1: '待机',
    2: '告警',
    3: '故障',
    4: '离线',
    5: '建设中'
}

const query = () => {
    queryStatus().then(result => {
        if (result.code === SUCCESS_CODE) {
            if (result.data && result.data.length > 0) {
                list.value = result.data.map(item => {
                    return { value: item.counting, name: status[item.status] }
                })
            } else {
                list.value = []
            }
        } else {
            list.value = []
        }
    })
}

query()
</script>
